<template>
  <div class="home-nav">
    <div>
          <img src="@/assets/logo.png"  style="width: 80px;height: 55px;">
      </div>
      <div class="home-title">星晖启航线上平台</div>
      <div class="home-bar">
          <div class="home-bar-element" @click="Router.homePage"
              :style="{ 'color': Router.home ? '#bfdbfe' : 'black' }">首页</div>
          <div class="home-bar-element" @click="Router.purchasePage"
          :style="{ 'color': Router.purchase ? '#bfdbfe' : 'black' }" >商城</div>
          <div class="home-bar-element"  @click="Router.dataPage"
              :style="{ 'color': Router.data ? '#bfdbfe' : 'black' }" >个人中心</div>
          <div class="home-bar-element" @click="Router.uploadPage"
              :style="{ 'color': Router.upload ? '#bfdbfe' : 'black' }">上传课程</div>
          <div class="home-bar-element" @click="Router.openLogin">登录</div>
          <div class="home-bar-element" @click="Router.openSign">注册</div>
      </div>
  </div>

   
  <div v-if="Router.showSign === true" class="popup">
        <div class="popup-content">
            <div @click="Router.closeSign" style="margin-left: 95%; background: gray;">×</div>
            <iframe src="../login" width="400px" height="360px"> </iframe>
        </div>
    </div>

 
  <div v-if="Router.showLogin === true" class="popup">
        <div class="popup-content">
            <div @click="Router.closeLogin" style="margin-left: 95%; background: gray;">×</div>
            <iframe src="../login" width="400px" height="360px"> </iframe>
        </div>
    </div>
  
  <div class="body">
    <div class="Course-title">
       <div style="margin-left: 50px;margin-top: 20px;"><router-link to="/">首页</router-link>>>课程</div>
       <div class="box">
      <video ref="videoElement" class="video-js vjs-default-skin" @click="toggleVideo"></video>
    </div> 
    <div class="courseIn">
          <div><span class="course-name"
            @click="router.push('/course')">{{information.name}}</span></div>
          <div class="In" style="margin-top: 20px;">开课时间：2024年04月03日</div>
          <div class="In">课程学时：3-5</div>
          <div class="In">{{ information.students }} 人参加</div>
        <div v-if="studying===false" class="In">未参与</div>
        <div v-if="studying===true" class="In" style="color: #ff8642;">已学习</div>
       <div style="display: flex;"  >
        <div>
           <button class="studyButton" v-if="studying===false"
           @click="study"  >加入课程</button>
          </div>
          <div>
           <button class="studyButton" v-if="studying===true"
            >已加入</button>
          </div>
          <div>  
           <button class="studyButton"  style="  margin-left: 40px;"
           @click="viewCourse"  >立即学习</button>
          </div>
       </div>
       
    </div>
    </div > 
    <div class="character">
      <div class="studyTitle">课程详情</div>
      <div class="contextShow">{{ information.context }}</div>
    </div>
    <div class="rec">
      <div class="studyTitle">课程评价</div>
    </div>
  </div>
</template>
<script setup>
import {ref, onMounted, onBeforeUnmount} from 'vue';
import router from '@/router/index';
import { RouterData } from '../home/home';
const {Router} =RouterData();
import videojs from 'video.js';
import 'video.js/dist/video-js.css';
import videoSrc from '@/assets/测试视频.mp4';
import { messageData } from '../upload/upload';
import  {studyData} from './study';
const {information}=messageData();
const {studying,join,study,disstudy,viewCourse} =studyData();
const videoElement = ref(null);
let player = null;

onMounted(() => {
player = videojs(videoElement.value, {
  controls: true,
  muted: false,
  autoplay: true,
  preload: 'auto',
  width: '400px',
  height: '250px',
  sources: [
    {
      src: videoSrc,
      type: 'video/mp4',
    },
  ],
  playbackRates: [],
});

player.on('ended', () => {
  player.currentTime(0); // 将视频播放进度重置为0
  player.play(); // 重新播放视频
});
});

onBeforeUnmount(() => {
if (player) {
  player.dispose();
}
});
const toggleVideo = () => {
if (player.paused()) {
  player.play();
} else {
  player.pause();
}
};
</script>
<style>
@import './study.scss'
</style>